class SearchBar extends React.Component{
    constructor(props){
        super(props);
        this.filterTextChange = this.filterTextChange.bind(this);
        this.inStockOnlyChange = this.inStockOnlyChange.bind(this);
    }
    filterTextChange(event){
        this.props.onFilterTextChange(event.target.value);
    }
    inStockOnlyChange(event){
        this.props.onInStockOnlyChange(event.target.checked);
    }
    render(){
        const filterText = this.props.filterText;
        const inStockOnly = this.props.inStockOnly;
        return (
            <div>
                <input value={filterText} onChange={this.filterTextChange}/>
                <input type="checkbox" checked={inStockOnly} onChange={this.inStockOnlyChange}/>
            </div>
        )
    }
}
const blockInlie = {
    display:"inline-block",
}
const blockInlieL = {
    display:"inline-block",
    marginLeft:"10px"
}
class ProductRow  extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const goodName = this.props.goodName;
        const price = this.props.price;
        const inStockOnly = this.props.inStockOnly;
        return (
            <li>
                <p style={blockInlie}>{goodName}</p>
                {
                    inStockOnly && <p style={blockInlieL}>{price}</p>
                }

            </li>
        )
    }
}
class ProductCategoryRow  extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const title = this.props.title;
        const data = this.props.data;
        const inStockOnly = this.props.inStockOnly;
        const el = data.map((item,index)=><ProductRow key={index} goodName={item.name} price={item.price} inStockOnly = {inStockOnly}/>)
        return (
            <div>
                {title}
                <ul>
                    {el}
                </ul>
            </div>
        )
    }
}
class ProductTable  extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const listJson = this.props.listJson;
        const inStockOnly = this.props.inStockOnly;
        let elArr = [];
        for (let i = 0; i < listJson.length; i++) {
            let ifHas = false;
            for (let j = 0; j <elArr.length ; j++) {
                if(elArr[j].name == listJson[i].category){
                    elArr[j].list.push(listJson[i]);
                    ifHas = true;
                    break;
                }
            }
            if(!ifHas){
                elArr.push({name:listJson[i].category,list:[listJson[i]]})
            }
        }
        const ele = elArr.map((item,index)=>{
            return <ProductCategoryRow
                        title={item.name}
                        data={item.list}
                        key={index}
                        inStockOnly={inStockOnly}
                    />
        })

        return (
            <div>
                <p style={blockInlie}>Name</p>
                <p style={blockInlieL}>Price</p>
                {ele}
            </div>
        )
    }
}
class FilterableProductTable  extends React.Component{
    constructor(props){
        super(props);
        this.data = [
            {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
            {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
            {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
            {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
            {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
            {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
        ];
        this.state = {
            filterText:"",
            inStockOnly:true
        }
        this.filterTextChange = this.filterTextChange.bind(this);
        this.inStockOnlyChange = this.inStockOnlyChange.bind(this);
    }
    filterTextChange(data){
        this.setState({filterText:data})
    }
    inStockOnlyChange(data){
        this.setState({inStockOnly:data})
    }
    render(){
        let filterText = this.state.filterText;
        let reg = new RegExp("("+ filterText +")","i");
        let inStockOnly = this.state.inStockOnly;
        let listJson = [];
        for (let i = 0; i < this.data.length; i++) {
            if(reg.test(this.data[i].name)){
                listJson.push(this.data[i])
            }
        }
        return (
            <div>
                <SearchBar inStockOnly={inStockOnly} onFilterTextChange={this.filterTextChange} onInStockOnlyChange = {this.inStockOnlyChange}/>
                <ProductTable listJson={listJson} inStockOnly={inStockOnly}/>
            </div>
        )
    }
}